{% extends 'reports/base_report.html' %}

{% block report_title %}Submit Report{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">Submit Report</li>
{% endblock %}

{% block report_content %}
<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Submit New Report</h5>
    </div>
    <div class="card-body">
        <form id="reportForm" method="post" enctype="multipart/form-data" action="{% url 'reports:submit' %}">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="id_title" class="form-label">Report Title</label>
                <input type="text" class="form-control" id="id_title" name="title" required>
                <div class="invalid-feedback">Please provide a title for the report.</div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="id_report_type" class="form-label">Report Type</label>
                    <select class="form-select" id="id_report_type" name="report_type" required>
                        <option value="">Select Report Type</option>
                        <option value="weekly">Weekly Report</option>
                        <option value="monthly">Monthly Report</option>
                        <option value="quarterly">Quarterly Report</option>
                        <option value="annual">Annual Report</option>
                        <option value="ad_hoc" selected>Ad Hoc Report</option>
                    </select>
                    <div class="invalid-feedback">Please select a report type.</div>
                </div>
                <div class="col-md-6">
                    <label for="id_file" class="form-label">Attach File (Optional)</label>
                    <input class="form-control" type="file" id="id_file" name="file">
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="id_period_start" class="form-label">Period Start</label>
                    <input type="date" class="form-control" id="id_period_start" name="period_start" required>
                    <div class="invalid-feedback">Please provide a start date.</div>
                </div>
                <div class="col-md-6">
                    <label for="id_period_end" class="form-label">Period End</label>
                    <input type="date" class="form-control" id="id_period_end" name="period_end" required>
                    <div class="invalid-feedback">Please provide an end date.</div>
                </div>
            </div>
            
            <div class="mb-3">
                <label for="id_content" class="form-label">Report Content</label>
                <textarea class="form-control" id="id_content" name="content" rows="8" required></textarea>
                <div class="invalid-feedback">Please provide the report content.</div>
                <div class="form-text">You can format your report using Markdown syntax.</div>
            </div>
            
            <div class="d-flex justify-content-between">
                <a href="{% url 'reports:list' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Reports
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-send"></i> Submit Report
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('reportForm');
        
        // Set default dates
        const today = new Date();
        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        
        document.getElementById('id_period_start').valueAsDate = firstDayOfMonth;
        document.getElementById('id_period_end').valueAsDate = today;
        
        // Form validation
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            form.classList.add('was-validated');
        }, false);
    });
</script>
{% endblock %}